<!-- BEGIN PAGE CONTAINER-->
<div class="container-fluid" id="dashboard">
    <div class="row">
        <div class="tpv-col-md-1-5">
            <div class="card tpv-dashboard-state-box" id="userCount">
                <div class="visual">
                   <span class="zmdi-hc-stack zmdi-hc-3x" style="color:#32c787;">
                      <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
                      <i class="zmdi zmdi-accounts zmdi-hc-stack-1x zmdi-hc-inverse"></i>
                  </span>
                </div>
                <div class="title">
                    用户总数
                </div>
                <div class="count">
                    <span></span>
                </div>
                <div class="more">
                    在线用户数：<span></span>
                    临时用户数：<span></span>
                </div>
            </div>
        </div>
        <div class="tpv-col-md-1-5">
            <div class="card tpv-dashboard-state-box" id="meetingRoomCount">
                <div class="visual">
                   <span class="zmdi-hc-stack zmdi-hc-3x" style="color:#daa53b;">
                      <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
                      <i class="zmdi zmdi-airplay zmdi-hc-stack-1x zmdi-hc-inverse"></i>
                  </span>
                </div>
                <div class="title">
                    会议室总数
                </div>
                <div class="count">
                    <span>20</span>
                </div>
                <div class="more">
                    <span>11</span>
                </div>
            </div>
        </div>
        <div class="tpv-col-md-1-5">
            <div class="card tpv-dashboard-state-box" id="meetingCount">
                <div class="visual">
                   <span class="zmdi-hc-stack zmdi-hc-3x" style="color:#4798f1;">
                      <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
                      <i class="zmdi zmdi-calendar zmdi-hc-stack-1x zmdi-hc-inverse"></i>
                  </span>
                </div>
                <div class="title">
                    会议总数
                </div>
                <div class="count">
                    <span>11</span>
                </div>
                <div class="more">
                    <span>12</span>
                </div>
            </div>
        </div>
        <div class="tpv-col-md-1-5">
            <div class="card tpv-dashboard-state-box" id="attendeeCount">
                <div class="visual">
                   <span class="zmdi-hc-stack zmdi-hc-3x" style="color:#32c787;">
                      <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
                      <i class="zmdi zmdi-accounts-alt zmdi-hc-stack-1x zmdi-hc-inverse"></i>
                  </span>
                </div>
                <div class="title">
                    参会者总数
                </div>
                <div class="count">
                    <span>11</span>
                </div>
                <div class="more">
                    日均参会数：<span>12</span>
                    正在参会数：<span>11</span>
                </div>
            </div>
        </div>
        <div class="tpv-col-md-1-5">
            <div class="card tpv-dashboard-state-box" id="durationCount">
                <div class="visual">
                   <span class="zmdi-hc-stack zmdi-hc-3x" style="color:#9761ed;">
                      <i class="zmdi zmdi-circle zmdi-hc-stack-2x"></i>
                      <i class="zmdi zmdi-timer zmdi-hc-stack-1x zmdi-hc-inverse"></i>
                  </span>
                </div>
                <div class="title">
                    开会总时长
                </div>
                <div class="count">
                    <span class="tpv-num">12</span> <span style="font-size:12px;">分钟</span>
                </div>
                <div class="more">
                    会议平均时长：<span class="tpv-num">12</span> 分钟
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-6">
            <div class="card" style="margin-left:24px;width:97%;height:400px">
                <div class="tpv-portlet-title">会议室情况</div>
                <div id="meetingRoomChart" style="width:100%;height:360px">

                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card" style="width:97%;height:400px">
                <div class="tpv-portlet-title">用户情况</div>
                <div id="userChart" style="width:100%;height:360px">

                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-12">
            <div class="card" style="margin-left:24px;width:97%;height:400px">
                <div style="background-color:#F0F0F0;">
                    <ul class="nav nav-tabs" id="meetingTab">
                        <li class="nav-item">
                            <a class="nav-link" href="#meetingNum" aria-controls="meetingNum"
                               data-toggle="tab">会议数量</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#attendeeNum" aria-controls="attendeeNum"
                               data-toggle="tab">参会总数</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#durationNum" aria-controls="durationNum"
                               data-toggle="tab">会议时长</a>
                        </li>
                        <li class="tpv-nav-item-group">
                            <div>
                                <div class="btn-group btn-group-toggle" data-toggle="buttons" style="float:left;">
                                    <label class="btn btn-save active" aria-pressed="true">
                                        <input type="radio" name="state" autocomplete="off" value="1" >今日
                                    </label>
                                    <label class="btn btn-save" aria-pressed="true">
                                        <input type="radio" name="state" autocomplete="off" value="2">本周
                                    </label>
                                    <label class="btn btn-save" aria-pressed="true">
                                        <input type="radio" name="state" autocomplete="off" value="3" >本月
                                    </label>
                                    <label class="btn btn-save" aria-pressed="true">
                                        <input type="radio" name="state" autocomplete="off" value="4" >全年
                                    </label>
                                </div>
                                <div class="btn-group" style="float:left;margin-left:20px;display:none">
                                    <input type="text" name="timeField" style="height: 30px;padding: 6px 12px;padding-right: 12px;padding-left: 12px;font-size: 12px;line-height: 1.42857143;color: #555;background-color: #fff;border: 0.5px solid #ddd;">
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" >
                    <div class="tab-pane active" id="meetingNum" style="width:100%;height: 330px">
                        <div id="meetingNum-container" style="width:60%;height:100%;float:left">

                        </div>
                        <div id="meetingNum-ranking" style="width:40%;height:100%;float:left;overflow:scroll;">
                            <div>会议室排名</div>
                            <ul class="list-group">

                            </ul>
                        </div>
                    </div>
                    <div class="tab-pane" id="attendeeNum" style="width:100%;height: 330px">
                        <div id="attendeeNum-container" style="width:60%;height:100%;float:left">

                        </div>
                        <div id="attendeeNum-ranking" style="width:40%;height:100%;float:left;overflow:scroll;">
                            <div>会议室排名</div>
                            <ul class="list-group">

                            </ul>
                        </div>
                    </div>
                    <div class="tab-pane" id="durationNum" style="width:100%;height:330px">
                        <div id="durationNum-container" style="width:60%;height:100%;float:left">

                        </div>
                        <div id="durationNum-ranking" style="width:40%;height:100%;float:left;overflow:scroll;">
                            <div>会议室排名</div>
                            <ul class="list-group">

                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>
    <div class="row">
        <div class="col-md-12">
            <div class="card" style="margin-left:24px;width:97%;height:430px">
                <div style="padding: 1rem 0rem;color:#000000;font-size:20px;background-color:#F6F6F6;">按客户统计</div>
                <div style="background-color:#F0F0F0;">
                    <ul class="nav nav-tabs" id="userGroupTab">
                        <li class="nav-item">
                            <a class="nav-link" href="#userGroup-meetingRoomNum" aria-controls="userGroup-meetingRoomNum"
                               data-toggle="tab">会议室</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#userGroup-meetingNum" aria-controls="userGroup-meetingNum"
                               data-toggle="tab">会议数</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="#userGroup-durationNum" aria-controls="userGroup-durationNum"
                               data-toggle="tab">会议时长</a>
                        </li>
                    </ul>
                </div>
                <div class="tab-content" >
                    <div class="tab-pane active" id="userGroup-meetingRoomNum" style="width:100%;height: 330px">
                        <div id="userGroup-meetingRoomNum-container" style="width:60%;height:100%;float:left">

                        </div>
                    </div>
                    <div class="tab-pane" id="userGroup-meetingNum" style="width:100%;height: 330px">
                        <div id="userGroup-meetingNum-container" style="width:60%;height:100%;float:left">

                        </div>
                    </div>
                    <div class="tab-pane" id="userGroup-durationNum" style="width:100%;height:330px">
                        <div id="userGroup-durationNum-container" style="width:60%;height:100%;float:left">

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="clearfix"></div>

    <div class="row">
        <div class="col-md-6">
            <div class="card" style="width:97%;height:400px">
                <div class="tpv-portlet-title">服务器状态</div>
                <div id="systemInfo" style="width:100%;height:30%;" class="container">
                        <div class="row">
                            <div class="col-md-6"><span id="memInfo" class="tpv-dashboard-system-info"></span><span class="tpv-dashboard-system-info">GB 内存,</span><span id="cpuInfo" class="tpv-dashboard-system-info"></span><span class="tpv-dashboard-system-info">核处理器,</span><span id="spaceInfo" class="tpv-dashboard-system-info"></span><span class="tpv-dashboard-system-info">GB 磁盘空间</span></div>
                            <div class="col-md-6"><span class="tpv-dashboard-system-info">系统：</span><span  id="osName" class="tpv-dashboard-system-info"></span></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><span class="tpv-dashboard-system-info">IP：</span><span  id="ip" class="tpv-dashboard-system-info"></span></div>
                            <div class="col-md-6"><span class="tpv-dashboard-system-info">位于：</span><span  id="city" class="tpv-dashboard-system-info">福建厦门</span></div>
                        </div>
                        <div class="row">
                            <div class="col-md-6"><span class="tpv-dashboard-system-info">带宽：</span><span  id="bandwidth" class="tpv-dashboard-system-info">4M</span></div>
                            <div class="col-md-6"><span class="tpv-dashboard-system-info">状态：</span><span  id="systemStatus" class="tpv-dashboard-system-info"></span></div>
                        </div>
                </div>
                <div id="systemChart" style="width:100%;height:65%">
                    <div style="width:50%;height:94%;float:left" id="memInfoPie">

                    </div>
                    <div style="width:50%;height:94%;float:left" id="spaceInfoPie">

                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="card" style="width:97%;height:400px">
                <div class="tpv-portlet-title">CPU使用情况</div>
                <div id="cpuLineChart" style="width:100%;height:360px">

                </div>
            </div>
        </div>

    </div>
    <script data-th-src="@{js/app/system/monitor/state.js(t=${version})}"></script>